window.onload = async () => {
  const MockUrl = `./js/data.json`; // 请求地址
  let data = []; // 存储请求后的数据
  // TODO：待补充代码，目标 1
  const res = await axios.get(MockUrl);
  data = [...res.data];
  // TODO：END
  // 请求完成后调用下面的代码
  const newData = getData(data);
  showData(newData);
};

/**
 * 将同一天浏览的相同商品去重并作为数组返回
 * @param {Array} defaultData json 文件中读取到的原始数据
 * @returns 去重后的数据，数据结构与 defaultData 相同
 */
const removeDuplicates = (defaultData) => {
  let newData = [];
  let idArr = [];
  // TODO：待补充代码
  defaultData.forEach((item) => {
    if (idArr.indexOf(item.id) == -1) idArr.push(item.id);
  });
  for (let i = 0; i < defaultData.length; i++) {
    let index = idArr.indexOf(defaultData[i].id);
    if (index !== -1) {
      idArr.splice(index, 1);
      newData.push(defaultData[i]);
    }
  }
  return newData;
};

/**
 * 将去重后的数据根据字段 viewed_on（格式化为 YYYY-MM-DD） 降序排序
 * @param {*} defaultData 去重后的数据
 * @returns 根据字段 viewed_on（格式化为 YYYY-MM-DD） 降序排序
 */
const sortByDate = (defaultData) => {
  let newData = [];
  // TODO：待补充代码
  defaultData.sort((a, b) => {
    let at = new Date(a.viewed_on);
    let bt = new Date(b.viewed_on);
    return bt - at;
  });
  newData = [...defaultData];
  return newData;
};
/**
 * 将去重排序后的所有商品数据，作为一个对象存储并返回，
 * 该对象的所有 `key` 为浏览商品的当天日期（即，字段 viewed_on 格式化为 YYYY-MM-DD），
 * `value` 为当天浏览的所有商品（以数组形式表现）。
 * @param {Array} defaultData 重后的所有商品数据
 * @returns
 */
const transformStructure = (defaultData) => {
  console.log(defaultData);
  let newData = {};
  // TODO：待补充代码
  defaultData.forEach((item) => {
    let date = new Date(item.viewed_on);
    let year = date.getFullYear();
    let mon = `${date.getMonth() + 1}`;
    let day = `${date.getDate()}`;
    mon = mon < 10 ? "0" + mon : mon;
    day = day < 10 ? "0" + day : day;
    let key = `${year}-${mon}-${day}`;
    if (newData[key] == undefined) newData[key] = [item];
    else newData[key] = [...newData[key], item];
  });
  console.log(newData);
  return newData;
};
const getData = (defaultData) => {
  let newData = removeDuplicates(defaultData);
  let sortData = sortByDate(newData);
  let objData = transformStructure(sortData);
  return objData;
};
const showData = (data) => {
  let str = ``;
  for (let k in data) {
    str += `<h3>${k}</h3>`;
    data[k].forEach((goods) => {
      str += `<div class="container">
      <div class="image"></div>
      <div class="details">
        <h4>${goods.name}</h4>
        <p>${goods.description}</p>
        <p class="buy">
          <span class="price">¥${goods.price}</span>
          <img src="./images/cart.svg" alt="" srcset="">
        </p>
      </div>
    </div>`;
    });
  }
  document.querySelector("#goodsList").innerHTML = str;
};
